<script lang="ts" setup>
import type { TableItem } from "@/common/apis/train/type"
import { TaskStaticsTypeEnum, taskStatusMap } from "@@/constants/other-keys"
import { ref, watch } from "vue"

interface props {
  selected: boolean
  data: TableItem
}

// eslint-disable-next-line ts/no-redeclare
const props = defineProps<props>()
const emit = defineEmits(["handleView", "handleDownload", "handleDelete", "toggleSelect"])

const checkboxValue = ref<boolean>()

function handleView() {
  emit("handleView", props.data)
}
function handleDelete() {
  emit("handleDelete", props.data)
}
function handleChangeSelect() {
  emit("toggleSelect", props.data)
}

watch(
  () => props.selected,
  () => {
    checkboxValue.value = props.selected
  }
)
</script>

<template>
  <el-card class="card-item" body-class="card-item body" @click.stop="handleView">
    <div class="card-header flex-between">
      <el-space class="flex-vc">
        <!-- <el-checkbox v-model="checkboxValue" @click.stop @change="handleChangeSelect" /> -->
        <el-icon>
          <UserFilled />
        </el-icon>
        <el-text>{{ data.create_user.user_name }}</el-text>
      </el-space>
      <div class="header-status">
        <div>{{ taskStatusMap[data.task_status] }}</div>
        <div class="process" :class="`_${data.task_status}`" v-if="data.task_status != TaskStaticsTypeEnum.ERROR && data.task_status != TaskStaticsTypeEnum.FINISHED">
          {{ data.task_process }}%
        </div>
      </div>
    </div>
    <div class="card-body flex-column">
      <div class="flex-start gap">
        <div class="tag-content" :class="`_${data.task_status}`">
          训练
        </div>
        <el-text truncated :title="data.task_name">
          {{ data.task_name }}
        </el-text>
      </div>
      <p class="describe" :title="data.task_describe">
        {{ data.task_describe }}
      </p>
    </div>
    <div class="line-div">
      <div
        class="line-div-color"
        :class="`_${data.task_status}`"
        :style="`width: ${data.task_process}%; background: '#409eff'`"
      />
    </div>
    <div class="card-footer">
      <div class="title">
        <el-icon color="#6B98D7">
          <Calendar />
        </el-icon>
        <span>{{ data.create_time }}</span>
      </div>
      <div class="operate" @click.stop>
        <el-dropdown trigger="click">
          <el-link :underline="false">
            <el-icon><MoreFilled /></el-icon>
          </el-link>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <template #default>
                  <el-link :underline="false" title="" @click.stop v-throttle="() => handleView()">
                    <el-icon :size="18">
                      <View />
                    </el-icon>
                    查看
                  </el-link>
                </template>
              </el-dropdown-item>
              <el-dropdown-item>
                <template #default>
                  <el-link :underline="false" title="" type="danger" @click.stop v-throttle="() => handleDelete()">
                    <el-icon :size="18">
                      <Delete />
                    </el-icon>
                    删除
                  </el-link>
                </template>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
$created: rgb(31, 119, 222);
$running: rgb(255, 163, 24);
$finished: rgb(0, 187, 153);
$error: rgb(245, 108, 108);
$pause: rgb(96, 111, 145);

.line-div {
  width: 100%;
  height: 3px;
  background-color: #2a3547;
  position: relative;
  & > .line-div-color {
    height: 3px;
    position: absolute;
    z-index: 99;
    &._0 {
      background-color: rgb(31, 119, 222);
    }
    &._1 {
      background-color: rgb(255, 163, 24);
    }
    &._2 {
      background-color: rgb(0, 187, 153);
    }
    &._3 {
      background-color: rgb(245, 108, 108);
    }
    &._4 {
      background-color: rgb(96, 111, 145);
    }
  }
}

.el-checkbox {
  height: auto !important;
}

.custom-card-container .card-header {
  padding: 14px !important;
}

.custom-card-container .card-body {
  padding: 14px !important;
}

.custom-card-container .card-footer {
  border-top: none;
  height: 58px !important;
  line-height: 58px !important;
  padding: 14px !important;
}

.header-status {
  display: flex;
  flex-direction: row;
  padding: 6px 16px;
  border-radius: 46px 46px 46px 46px;
  border: 1px solid #465168;
  justify-content: space-evenly;
  gap: 20px;
  & > div:not(:first-child) {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: -10px; // 调整分隔线位置
      top: 50%;
      transform: translateY(-50%);
      height: 100%; // 调整分隔线高度
      width: 1px;
      opacity: 0.4;
      background-color: #fff; // 使用与边框相同的颜色
    }
  }
  & > .process {
    &._0 {
      color: rgb(31, 119, 222);
    }
    &._1 {
      color: rgb(255, 163, 24);
    }
    &._2 {
      color: rgb(0, 187, 153);
    }
    &._3 {
      color: rgb(245, 108, 108);
    }
    &._4 {
      color: rgb(96, 111, 145);
    }
  }
}

.tag-content {
  width: 52px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  &._0 {
    color: rgb(31, 119, 222);
    background-color: rgba(27, 92, 149, 0.1);
    border-top: 1px solid rgb(31, 119, 222);
    border-bottom: 1px solid rgb(31, 119, 222);
  }
  &._1 {
    color: rgb(255, 163, 24);
    background-color: rgba(219, 126, 16, 0.1);
    border-top: 1px solid rgb(255, 163, 24);
    border-bottom: 1px solid rgb(255, 163, 24);
  }
  &._2 {
    color: rgb(0, 187, 153);
    background-color: rgba(0, 187, 153, 0.1);
    border-radius: 0px 0px 0px 0px;
    border-top: 1px solid rgb(0, 187, 153);
    border-bottom: 1px solid rgb(0, 187, 153);
  }
  &._3 {
    color: rgb(245, 108, 108);
    background-color: rgba(211, 83, 72, 0.1);
    border-top: 1px solid rgb(245, 108, 108);
    border-bottom: 1px solid rgb(245, 108, 108);
  }
  &._4 {
    color: rgb(96, 111, 145);
    background-color: rgba(83, 85, 97, 0.1);
    border-top: 1px solid rgb(96, 111, 145);
    border-bottom: 1px solid rgb(96, 111, 145);
  }
}

:deep(.el-card__body) {
  --el-card-padding: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.describe {
  display: -webkit-box; /* 必须结合 -webkit-line-clamp 使用 */
  -webkit-box-orient: vertical; /* 设置盒子方向为垂直 */
  -webkit-line-clamp: 2; /* 显示的行数 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: normal; /* 允许文本换行 */
  margin-bottom: 0px;
  color: rgba(250, 250, 250, 0.8);
  line-height: 22px;
  font-size: 12px;
}
</style>
